/* 这个文件来放置主界面中的样式 */

.client-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: 700px;
    height: 570px;
    background-color: rgb(238, 238, 238);
    border-radius: 5px;

    display: flex;

    /*垂直屏幕向外面的位置就是z轴,从里向外,main的坐标应该比 cover 大 , 因为它在背景图片之上*/
    z-index: 2;

}

.main .left {
    width: 280px;
    height: 100%;
    background-color: rgb(46, 50, 56);

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.main .right {
    width: 720px;
    height: 100%;

    padding: 0 20px;
}

.cover {
    width: 100%;
    height: 100%;

    background-image: url(../img/flower.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* 为了让 .cover 和 .main 能够重叠, 给 .cover 加上个定位属性 */
    position: absolute;
    top: 0;
    left: 0;

    z-index: 1;

    /*使用 CSS 的滤镜效果 -> 背景变模糊*/
    filter: blur(5px);
}


/* 登录后用户名的样式 */
.main .left .user {
  height: 80px;
  font-size: 20px;
  line-height: 80px;
  color:white;
  padding: 0 20px;
}

/* 搜索框的样式 */
.main .left .search {
  height: 40px;
  padding: 0 20px;

  /* 使用弹性布局,让搜索框里面的元素, 水平方向排列 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索输入框的输入内容样式 */
.main .left .search input {
  width: 200px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  color: white; 
  background-color: rgb(38, 41, 46);

  /* 去除边框和轮廓线 */
  border: none;
  outline: none;

  /* 输入框里的文字和左侧边界有个距离 */
  padding-left: 10px;
  border-radius: 5px;
}

/* 搜索按钮的样式 */
.main .left .search button {
  width: 34px;
  height: 34px;
  border: none;
  outline: none;


  /* 将搜索按钮的背景颜色黑输入框的颜色进行匹配 */
  background-color: rgb(38, 41, 46);

  border-radius: 5px;
  background-image: url(../img/搜索.png);
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat ;

}

/* 点击按钮后,按钮背景颜色变灰色 */
.main .left .search button:active {
  background-color: grey;
}

/* 标签的排列样式 */
.main .left .tab {
  height: 50px;
  display: flex;
  align-items: center;
}

/* 默认先选中对话标签 */
/* 对话标签样式设计 */
.main .left .tab .tab-session {
  height: 100%;
  width: 50%;
  background-image: url(../img/会话3.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;

}

/* 好友列表标签设计 */
.main .left .tab .tab-friend {
  height: 100%;
  width: 50%;
  background-image: url(../img/用户1.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center center;
}
/*------------------------------------------8/
/* 会话列表的样式 */
.main .left .list {
  /* 计算得到列表的高度  */
  height: 400px;

  /* 如果列表里面的内容太多,就自动提供一个滚动条 */
  overflow: auto;
}

/* 一条会话框的样式设计 */
.main .left .list li {
  height :60px;
  padding: 5px 20px; /*10px 是上下内边距, 20px 是左右内边距*/
  color:white;/*文字颜色*/
  border-top: 1px solid black;/*上边框的样式*/
}

/* 选中一条会话框的样式设计 */
.main .left .list .selected{
  background-color: rgb(46, 54, 65);  

}


/* 这个样式给会话列表使用 */
/* 会话框中的文字内容的样式设计 */
.main .left .list .li h3 ,
.main .left .list .li p {
  /* 会话框中的内容显示计算: 一条会话框的高度60px-20px(上下内边距) = 40px  */
  /* 然后,除了姓名以外还有预览内容,所以30px分为上下5px */
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

/* 这个样式给好友列表使用 */
.main .left .list li h4 {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

/* 应用了这个 css 类的元素就会被自动隐藏 */
.hide {
  display: none;
}

/* 通过浏览器,将滚动条隐藏 */
::-webkit-scrollbar {
  display: none;
}

.main .right .title







